<template>
  <div class="dispute-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>商家纠纷处理</span>
          <el-button-group>
            <el-button type="primary" @click="handleBatchProcess"
              >批量处理</el-button
            >
            <el-button type="success" @click="exportData">导出数据</el-button>
          </el-button-group>
        </div>
      </template>

      <!-- 搜索栏 -->
      <div class="search-form">
        <div class="form-header">
          <div class="title">搜索条件</div>
        </div>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="商家名称">
            <el-input
              v-model="searchForm.merchantName"
              placeholder="请输入商家名称"
            />
          </el-form-item>
          <el-form-item label="商家类型">
            <el-select
              v-model="searchForm.merchantType"
              placeholder="请选择商家类型"
            >
              <el-option label="餐饮美食" value="food" />
              <el-option label="零售商店" value="retail" />
              <el-option label="生活服务" value="service" />
              <el-option label="文化娱乐" value="entertainment" />
              <el-option label="其他" value="other" />
            </el-select>
          </el-form-item>
          <el-form-item label="纠纷类型">
            <el-select
              v-model="searchForm.disputeType"
              placeholder="请选择纠纷类型"
            >
              <el-option label="商品质量" value="product_quality" />
              <el-option label="服务态度" value="service_attitude" />
              <el-option label="虚假宣传" value="false_advertising" />
              <el-option label="价格争议" value="price_dispute" />
              <el-option label="发货延迟" value="delivery_delay" />
              <el-option label="退款争议" value="refund_dispute" />
              <el-option label="其他" value="others" />
            </el-select>
          </el-form-item>
          <el-form-item label="处理状态">
            <el-select v-model="searchForm.status" placeholder="请选择处理状态">
              <el-option label="待处理" value="pending" />
              <el-option label="处理中" value="processing" />
              <el-option label="已完成" value="completed" />
              <el-option label="已关闭" value="closed" />
            </el-select>
          </el-form-item>
          <el-form-item label="提交时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="disputesList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="纠纷ID" width="120" />
          <el-table-column prop="merchantName" label="商家名称" min-width="180" />
          <el-table-column prop="merchantType" label="商家类型" width="120">
            <template #default="{ row }">
              <el-tag size="small">{{
                getMerchantTypeLabel(row.merchantType)
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="disputeType" label="纠纷类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getDisputeTypeTag(row.disputeType)">
                {{ getDisputeTypeLabel(row.disputeType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="涉及金额" width="120">
            <template #default="{ row }">
              <span v-if="row.amount">¥{{ row.amount }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="submitTime" label="提交时间" width="160" />
          <el-table-column prop="status" label="处理状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTag(row.status)">
                {{ getStatusLabel(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button-group>
                <el-button
                  type="primary"
                  size="small"
                  :disabled="
                    row.status === 'completed' || row.status === 'closed'
                  "
                  @click="handleProcess(row)"
                >
                  处理
                </el-button>
                <el-button type="info" size="small" @click="viewDetail(row)">
                  详情
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
          
          <template #empty>
            <div class="empty-state">
              <el-empty 
                description="暂无纠纷数据" 
                :image-size="200"
              >
                <div class="empty-text">还没有任何商家纠纷数据</div>
                <div class="empty-subtext">收到商家纠纷后即可在此处查看纠纷信息</div>
              </el-empty>
            </div>
          </template>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <!-- 处理对话框 -->
    <el-dialog v-model="processDialogVisible" title="纠纷处理" width="800px">
      <el-form :model="processForm" label-width="100px">
        <el-form-item label="处理方式">
          <el-radio-group v-model="processForm.method">
            <el-radio label="refund">退款处理</el-radio>
            <el-radio label="compensation">赔偿处理</el-radio>
            <el-radio label="exchange">换货处理</el-radio>
            <el-radio label="mediation">调解处理</el-radio>
            <el-radio label="reject">驳回申诉</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="处理金额"
          v-if="['refund', 'compensation'].includes(processForm.method)"
        >
          <el-input-number
            v-model="processForm.amount"
            :min="0"
            :precision="2"
            :step="10"
          />
        </el-form-item>
        <el-form-item label="处理说明">
          <el-input
            v-model="processForm.comment"
            type="textarea"
            rows="4"
            placeholder="请输入处理说明"
          />
        </el-form-item>
        <el-form-item label="附加文件">
          <el-upload
            class="upload-demo"
            action="/api/admin/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传 jpg/png/pdf 文件，且不超过 5MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="dispute-info">
        <h4>纠纷信息</h4>
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="订单号">{{
            currentDispute.orderId
          }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{
            currentDispute.orderTime
          }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{
            currentDispute.productName
          }}</el-descriptions-item>
          <el-descriptions-item label="订单金额"
            >¥{{ currentDispute.orderAmount }}</el-descriptions-item
          >
          <el-descriptions-item label="申诉内容" :span="2">{{
            currentDispute.content
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="evidence-files" v-if="currentDispute.evidences?.length">
          <h4>证据材料</h4>
          <el-image
            v-for="(url, index) in currentDispute.evidences"
            :key="index"
            :src="url"
            :preview-src-list="currentDispute.evidences"
            fit="cover"
            class="evidence-image"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="processDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitProcess">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="纠纷详情" width="800px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="纠纷ID">{{
          currentDispute.id
        }}</el-descriptions-item>
        <el-descriptions-item label="商家名称">{{
          currentDispute.merchantName
        }}</el-descriptions-item>
        <el-descriptions-item label="商家类型">
          <el-tag size="small">{{
            getMerchantTypeLabel(currentDispute.merchantType)
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="纠纷类型">
          <el-tag :type="getDisputeTypeTag(currentDispute.disputeType)">
            {{ getDisputeTypeLabel(currentDispute.disputeType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="涉及金额">
          <span v-if="currentDispute.amount">¥{{ currentDispute.amount }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="提交时间">{{
          currentDispute.submitTime
        }}</el-descriptions-item>
        <el-descriptions-item label="处理状态">
          <el-tag :type="getStatusTag(currentDispute.status)">
            {{ getStatusLabel(currentDispute.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="订单信息" :span="2">
          <div>订单号：{{ currentDispute.orderId }}</div>
          <div>下单时间：{{ currentDispute.orderTime }}</div>
          <div>商品名称：{{ currentDispute.productName }}</div>
          <div>订单金额：¥{{ currentDispute.orderAmount }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="申诉内容" :span="2">
          {{ currentDispute.content }}
        </el-descriptions-item>
        <el-descriptions-item label="证据材料" :span="2">
          <div class="evidence-files">
            <el-image
              v-for="(url, index) in currentDispute.evidences"
              :key="index"
              :src="url"
              :preview-src-list="currentDispute.evidences"
              fit="cover"
              class="evidence-image"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          v-if="currentDispute.status === 'completed'"
          label="处理结果"
          :span="2"
        >
          <div>
            处理方式：{{ getProcessMethodLabel(currentDispute.processMethod) }}
          </div>
          <div v-if="currentDispute.processAmount">
            处理金额：¥{{ currentDispute.processAmount }}
          </div>
          <div>处理说明：{{ currentDispute.processComment }}</div>
          <div>处理时间：{{ currentDispute.processTime }}</div>
          <div>处理人员：{{ currentDispute.processor }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import service from "@/api/axios";
import * as XLSX from "xlsx";

// 搜索表单
const searchForm = reactive({
  merchantName: "",
  merchantType: "",
  disputeType: "",
  status: "",
  dateRange: [],
});

// 表格数据
const loading = ref(false);
const disputesList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const selectedDisputes = ref([]);

// 测试数据
const testDisputesList = [
  {
    id: "DP2023050001",
    merchantName: "桂林景区",
    merchantType: "scenic",
    disputeType: "service_attitude",
    amount: 299.00,
    submitTime: "2023-05-10 14:30:22",
    status: "pending",
    orderId: "OR2023042001",
    orderTime: "2023-04-20 10:15:30",
    productName: "桂林两日游",
    orderAmount: 598.00,
    content: "导游服务态度差，没有按照约定的行程安排，且不愿意沟通解决问题。",
    evidences: [
      "https://example.com/evidence1.jpg",
      "https://example.com/evidence2.jpg"
    ]
  },
  {
    id: "DP2023050002",
    merchantName: "阳朔西街餐厅",
    merchantType: "restaurant",
    disputeType: "product_quality",
    amount: 158.00,
    submitTime: "2023-05-08 19:45:12",
    status: "processing",
    orderId: "OR2023050701",
    orderTime: "2023-05-07 18:30:00",
    productName: "特色套餐",
    orderAmount: 158.00,
    content: "菜品与图片描述不符，口味差异很大，已拍照取证。",
    evidences: [
      "https://example.com/evidence3.jpg"
    ]
  },
  {
    id: "DP2023050003",
    merchantName: "龙胜酒店",
    merchantType: "hotel",
    disputeType: "false_advertising",
    amount: 680.00,
    submitTime: "2023-05-05 09:20:35",
    status: "completed",
    orderId: "OR2023050501",
    orderTime: "2023-05-05 08:15:00",
    productName: "豪华大床房",
    orderAmount: 680.00,
    content: "房间设施陈旧，与网站宣传的豪华装修相差甚远。热水供应不足。",
    evidences: [
      "https://example.com/evidence4.jpg",
      "https://example.com/evidence5.jpg",
      "https://example.com/evidence6.jpg"
    ],
    processMethod: "refund",
    processAmount: 200.00,
    processComment: "经核实，房间确实与宣传存在差异，同意部分退款。",
    processTime: "2023-05-06 14:25:18",
    processor: "管理员A"
  },
  {
    id: "DP2023050004",
    merchantName: "象山购物中心",
    merchantType: "shopping",
    disputeType: "refund_dispute",
    amount: 399.00,
    submitTime: "2023-05-03 16:10:45",
    status: "closed",
    orderId: "OR2023050301",
    orderTime: "2023-05-03 15:45:22",
    productName: "纪念T恤",
    orderAmount: 399.00,
    content: "购买后发现尺码不合适，要求退货被拒绝。",
    evidences: []
  },
  {
    id: "DP2023050005",
    merchantName: "漓江风景区",
    merchantType: "scenic",
    disputeType: "price_dispute",
    amount: 450.00,
    submitTime: "2023-05-01 11:35:28",
    status: "pending",
    orderId: "OR2023043001",
    orderTime: "2023-04-30 09:30:15",
    productName: "漓江游船票",
    orderAmount: 450.00,
    content: "购买时未明确告知额外收费项目，导致实际消费超出预期。",
    evidences: [
      "https://example.com/evidence7.jpg"
    ]
  }
];

// 处理对话框
const processDialogVisible = ref(false);
const processForm = reactive({
  method: "",
  amount: 0,
  comment: "",
  files: []
});

// 详情对话框
const detailDialogVisible = ref(false);
const currentDispute = ref({});

// 获取商家类型标签
const getMerchantTypeLabel = (type) => {
  const types = {
    food: "餐饮美食",
    retail: "零售商店",
    service: "生活服务",
    entertainment: "文化娱乐",
    other: "其他",
    scenic: "景点",
    hotel: "酒店",
    restaurant: "餐饮",
    shopping: "购物",
  };
  return types[type] || type;
};

// 获取纠纷类型标签
const getDisputeTypeLabel = (type) => {
  const types = {
    product_quality: "商品质量",
    service_attitude: "服务态度",
    false_advertising: "虚假宣传",
    price_dispute: "价格争议",
    delivery_delay: "发货延迟",
    refund_dispute: "退款争议",
    others: "其他",
  };
  return types[type] || type;
};

// 获取纠纷类型标签样式
const getDisputeTypeTag = (type) => {
  const types = {
    product_quality: "danger",
    service_attitude: "warning",
    false_advertising: "danger",
    price_dispute: "warning",
    delivery_delay: "info",
    refund_dispute: "warning",
    others: "",
  };
  return types[type] || "";
};

// 获取状态标签
const getStatusLabel = (status) => {
  const statuses = {
    pending: "待处理",
    processing: "处理中",
    completed: "已完成",
    closed: "已关闭",
  };
  return statuses[status] || status;
};

// 获取状态标签样式
const getStatusTag = (status) => {
  const statuses = {
    pending: "warning",
    processing: "primary",
    completed: "success",
    closed: "info",
  };
  return statuses[status] || "";
};

// 获取处理方式标签
const getProcessMethodLabel = (method) => {
  const methods = {
    refund: "退款处理",
    compensation: "赔偿处理",
    exchange: "换货处理",
    mediation: "调解处理",
    reject: "驳回申诉",
  };
  return methods[method] || method;
};

// 获取纠纷列表
const fetchDisputesList = async () => {
  loading.value = true;
  try {
    // 格式化日期
    const startDate = searchForm.dateRange && searchForm.dateRange[0] 
      ? formatDate(searchForm.dateRange[0]) : '';
    const endDate = searchForm.dateRange && searchForm.dateRange[1] 
      ? formatDate(searchForm.dateRange[1]) : '';

    // 调用API获取纠纷列表
    const res = await service.get('/admin/merchants/disputes', {
      params: {
        page: currentPage.value,
        pageSize: pageSize.value,
        merchantName: searchForm.merchantName,
        merchantType: searchForm.merchantType,
        disputeType: searchForm.disputeType,
        status: searchForm.status,
        startDate,
        endDate
      }
    });

    if (res && res.code === 200) {
      disputesList.value = res.data.list || [];
      total.value = res.data.total || 0;
    } else {
      // 如果API调用失败，使用测试数据
      disputesList.value = testDisputesList;
      total.value = testDisputesList.length;
    }
  } catch (error) {
    console.error("获取纠纷列表失败：", error);
    ElMessage.error("获取纠纷列表失败，使用测试数据");
    
    // 使用测试数据
    disputesList.value = testDisputesList;
    total.value = testDisputesList.length;
  } finally {
    loading.value = false;
  }
};

// 格式化日期为YYYY-MM-DD
const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchDisputesList();
};

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  searchForm.dateRange = [];
  handleSearch();
};

// 处理选择变化
const handleSelectionChange = (val) => {
  selectedDisputes.value = val;
};

// 批量处理
const handleBatchProcess = () => {
  if (selectedDisputes.value.length === 0) {
    ElMessage.warning("请选择要处理的纠纷");
    return;
  }
  
  ElMessageBox.confirm(
    `确定要批量处理选中的 ${selectedDisputes.value.length} 条纠纷吗？`,
    "批量处理确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    try {
      const ids = selectedDisputes.value.map(item => item.id);
      const res = await service.post('/admin/merchants/disputes/batch-process', {
        ids,
        status: 'processing'
      });
      
      if (res && res.code === 200) {
        ElMessage.success("批量处理成功");
        fetchDisputesList();
      } else {
        ElMessage.error(res?.message || "批量处理失败");
      }
    } catch (error) {
      console.error("批量处理失败：", error);
      ElMessage.error("批量处理失败");
    }
  }).catch(() => {
    // 用户取消操作
  });
};

// 导出数据
const exportData = () => {
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  
  // 准备导出数据
  const exportData = disputesList.value.map(item => ({
    '纠纷ID': item.id,
    '商家名称': item.merchantName,
    '商家类型': getMerchantTypeLabel(item.merchantType),
    '纠纷类型': getDisputeTypeLabel(item.disputeType),
    '涉及金额': item.amount ? `¥${item.amount}` : '-',
    '提交时间': item.submitTime,
    '处理状态': getStatusLabel(item.status),
    '订单ID': item.orderId,
    '下单时间': item.orderTime,
    '商品名称': item.productName,
    '订单金额': `¥${item.orderAmount}`,
    '申诉内容': item.content,
    '处理方式': item.processMethod ? getProcessMethodLabel(item.processMethod) : '-',
    '处理金额': item.processAmount ? `¥${item.processAmount}` : '-',
    '处理说明': item.processComment || '-',
    '处理时间': item.processTime || '-',
    '处理人员': item.processor || '-'
  }));
  
  // 创建工作表
  const ws = XLSX.utils.json_to_sheet(exportData);
  
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, '商家纠纷数据');
  
  // 导出文件
  XLSX.writeFile(wb, '商家纠纷数据.xlsx');
  
  ElMessage.success("数据导出成功");
};

// 处理单个纠纷
const handleProcess = async (row) => {
  try {
    // 获取纠纷详情
    const res = await service.get(`/admin/merchants/disputes/${row.id}`);
    
    if (res && res.code === 200) {
      currentDispute.value = res.data;
    } else {
      // 如果API调用失败，使用传入的行数据
      currentDispute.value = row;
    }
    
    // 重置处理表单
    processForm.method = "";
    processForm.amount = 0;
    processForm.comment = "";
    processForm.files = [];
    
    processDialogVisible.value = true;
  } catch (error) {
    console.error("获取纠纷详情失败：", error);
    ElMessage.error("获取纠纷详情失败");
    
    // 使用传入的行数据
    currentDispute.value = row;
    processDialogVisible.value = true;
  }
};

// 查看详情
const viewDetail = async (row) => {
  try {
    // 获取纠纷详情
    const res = await service.get(`/admin/merchants/disputes/${row.id}`);
    
    if (res && res.code === 200) {
      currentDispute.value = res.data;
    } else {
      // 如果API调用失败，使用传入的行数据
      currentDispute.value = row;
    }
    
    detailDialogVisible.value = true;
  } catch (error) {
    console.error("获取纠纷详情失败：", error);
    ElMessage.error("获取纠纷详情失败");
    
    // 使用传入的行数据
    currentDispute.value = row;
    detailDialogVisible.value = true;
  }
};

// 提交处理
const submitProcess = async () => {
  if (!processForm.method) {
    ElMessage.warning("请选择处理方式");
    return;
  }
  if (
    ["refund", "compensation"].includes(processForm.method) &&
    !processForm.amount
  ) {
    ElMessage.warning("请输入处理金额");
    return;
  }
  if (!processForm.comment) {
    ElMessage.warning("请输入处理说明");
    return;
  }
  
  try {
    const formData = new FormData();
    formData.append('id', currentDispute.value.id);
    formData.append('method', processForm.method);
    formData.append('amount', processForm.amount);
    formData.append('comment', processForm.comment);
    
    // 添加文件
    if (processForm.files && processForm.files.length > 0) {
      processForm.files.forEach(file => {
        formData.append('files', file);
      });
    }
    
    const res = await service.post('/admin/merchants/disputes/process', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    
    if (res && res.code === 200) {
      ElMessage.success("处理成功");
      processDialogVisible.value = false;
      fetchDisputesList();
    } else {
      ElMessage.error(res?.message || "处理失败");
    }
  } catch (error) {
    console.error("处理失败：", error);
    ElMessage.error("处理失败");
  }
};

// 文件上传相关方法
const handlePreview = (file) => {
  console.log('预览文件', file);
  window.open(URL.createObjectURL(file.raw));
};

const handleRemove = (file, fileList) => {
  console.log('移除文件', file, fileList);
  processForm.files = fileList.map(item => item.raw);
};

const beforeRemove = (file, fileList) => {
  return ElMessageBox.confirm(`确定移除 ${file.name}？`);
};

// 分页相关方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchDisputesList();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchDisputesList();
};

// 页面加载时获取数据
onMounted(() => {
  fetchDisputesList();
});
</script>

<style scoped>
.dispute-management {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.form-header {
  margin-bottom: 15px;
}

.form-header .title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.form-footer {
  margin-top: 15px;
  text-align: center;
}

.table-container {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.upload-box {
  margin-top: 15px;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
}

.attachments {
  margin-top: 20px;
}

.attachments-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.attachment-name {
  margin-left: 8px;
  flex: 1;
}

.attachment-action {
  margin-left: 8px;
}

.dispute-detail {
  margin-bottom: 20px;
}

.detail-title {
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.detail-item {
  display: flex;
  margin-bottom: 10px;
}

.detail-label {
  width: 120px;
  color: #606266;
}

.detail-value {
  flex: 1;
  word-break: break-all;
}

.empty-state {
  padding: 60px 0;
  text-align: center;
}

.empty-text {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-top: 15px;
}

.empty-subtext {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}
</style>
